<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/payrollReport'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="年月份：">
                        <el-date-picker v-model="paging.month" type="month" placeholder="选择年月" format="yyyy-MM" value-format="yyyy-MM"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置 </el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box" style="overflow-x: scroll">
                <el-button style="margin-left: auto; margin-right: 20px" type="primary" @click="submit">提交</el-button>
                <el-button v-if="utils.getIsShopowner()" style="margin-left: auto" @click="exportFn" icon="el-icon-download" type="primary">导出 </el-button>
                <!-- :disabled="loading||list.length>0" -->
                <el-button type="primary" @click="generateSalary()">生成员工信息</el-button>
                <div style="margin-top: 20px">
                    <el-table v-loading="loading" max-height="550" :data="list" header-row-class-name="has-gutter-table" style="width: 100%" border show-summary :summary-method="getSummaries">
                        <el-table-column type="index" label="序号" align="center" width="70" fixed="left"> </el-table-column>
                        <el-table-column prop="store.title" label="门店" align="center" min-width="100" show-overflow-tooltip fixed></el-table-column>
                        <el-table-column prop="month" label="月份" align="center" fixed></el-table-column>
                        <el-table-column prop="staff.name" label="姓名" align="center" fixed></el-table-column>
                        <el-table-column prop="staff.position.name" label="岗位" align="center" fixed> </el-table-column>
                        <el-table-column prop="merit_grade" label="绩效分数" align="center" min-width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.merit_grade" placeholder="" @blur="blur(scope.row)" v-if="scope.row.staff.position.name == '店长'"> </el-input>
                                <span v-else>{{ scope.row.merit_grade }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="target" label="指标额" align="center" min-width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.target" placeholder="" @blur="blur(scope.row)" v-if="scope.row.staff.position.name == '店长'"></el-input>
                                <span v-else>{{ scope.row.target }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="store_ach" label="门店业绩" align="center"></el-table-column>
                        <el-table-column prop="staff_ach" label="个人销售业绩" align="center"></el-table-column>
                        <el-table-column prop="staff_install" label="个人安装业绩" align="center"></el-table-column>
                        <el-table-column prop="product_sale" label="成品销售（发型师）" align="center"></el-table-column>
                        <el-table-column prop="hair" label="染发烫发" align="center"></el-table-column>
                        <el-table-column prop="nurse_num" label="护理次数" align="center"></el-table-column>
                        <el-table-column prop="free_num" label="义剪次数" align="center"></el-table-column>
                        <el-table-column prop="ycqts" label="实际出勤天数" align="center" min-width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.ycqts" placeholder="" @blur="blur(scope.row)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="leave" label="请假天数" align="center"></el-table-column>
                        <el-table-column label="底薪" align="center" min-width="120">
                            <el-table-column prop="base_money" label="基本工资" align="center"></el-table-column>
                        </el-table-column>
                        <el-table-column label="提成" align="center">
                            <el-table-column prop="ach_shape" label="个人业绩提成" align="center"></el-table-column>
                            <el-table-column prop="hair_shape" label="染发/烫发提成" align="center"></el-table-column>
                            <el-table-column prop="nurse_shape" label="护理提成" align="center"></el-table-column>
                            <el-table-column prop="manage_shape" label="管理提成" align="center"> </el-table-column>
                            <el-table-column prop="free_shape" label="义剪提成" align="center"></el-table-column>
                            <!-- <el-table-column prop="sundry_shape" label="杂项提成" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.sundry_shape" placeholder="" @blur="blur(scope.row)"> </el-input>
                                </template>
                            </el-table-column> -->
                            <el-table-column prop="other_shape" label="其他提成" align="center"></el-table-column>
                        </el-table-column>
                        <el-table-column label="补贴" align="center">
                            <el-table-column prop="overtime_money" label="加班" align="center" min-width="120"> </el-table-column>
                            <el-table-column prop="year_subsidy_money" label="工龄补贴" align="center" min-width="120"> </el-table-column>
                            <el-table-column prop="full_money" label="全勤奖" align="center" min-width="100">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.full_money" placeholder="" @blur="blur(scope.row)"> </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="subsidy_money" label="补贴" align="center" min-width="120">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.subsidy_money" placeholder="" @blur="blur(scope.row)"> </el-input>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="扣款" align="center">
                            <el-table-column prop="leave_deduction" label="请假扣款" align="center" min-width="120"> </el-table-column>
                            <el-table-column prop="other_deduction" label="其他扣款" align="center" min-width="120">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.other_deduction" placeholder="" @blur="blur(scope.row)"></el-input>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="wage_salary" label="应发工资" align="center" min-width="120"> </el-table-column>
                        <el-table-column prop="social_deduction" label="代扣社保" align="center" min-width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.social_deduction" placeholder="" @blur="blur(scope.row)"> </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="net_salary" label="实发工资" align="center"></el-table-column>
                        <el-table-column prop="remark" label="备注" align="center" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" placeholder="" @blur="blur(scope.row)" type="textarea"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                paging: {
                    page: 1,
                    total: 0,
                    limit: 10,
                    month: '',
                },
                list: [],
            };
        },
        created() {
            if (this.$route.path == '/payrollReport') {
                let d = this.$moment(new Date()).format('DD');
                if (d > 6) {
                    this.paging.month = this.$moment(new Date()).format('YYYY-MM');
                } else {
                    let time = new Date().getTime() - 30 * 24 * 60 * 60 * 1000;
                    this.paging.month = this.$moment(time).format('YYYY-MM');
                }
                this.handleCurrentChange(1);
            }
        },
        mounted() {},
        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index == 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map((item) => Number(item[column.property]));
                    if (column.property == 'target' || column.property == 'store_ach' || column.property == 'staff_ach' || column.property == 'staff_install' || column.property == 'product_sale' || column.property == 'hair' || column.property == 'base_money' || column.property == 'ach_shape' || column.property == 'hair_shape' || column.property == 'nurse_shape' || column.property == 'manage_shape' || column.property == 'free_shape' || column.property == 'sundry_shape' || column.property == 'other_shape' || column.property == 'overtime_money' || column.property == 'year_subsidy_money' || column.property == 'full_money' || column.property == 'subsidy_money' || column.property == 'leave_deduction' || column.property == 'other_deduction' || column.property == 'wage_salary' || column.property == 'social_deduction' || column.property == 'net_salary') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = sums[index].toFixed(2);
                    } else if (column.property == 'merit_grade' || column.property == 'nurse_num' || column.property == 'free_num' || column.property == 'ycqts' || column.property == 'leave') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
            //生成工资报表单
            async generateSalary() {
                let { code, data } = await this.$Http.generateSalary({ month: this.paging.month });
                if (code) {
                    this.$message.success('操作成功');
                    await this.handleCurrentChange(1);
                }
            },
            async blur(row) {
                let { code, data } = await this.$Http.setSalary({
                    id: row.id,
                    merit_grade: row.merit_grade,
                    target: row.target,
                    ycqts: row.ycqts ? row.ycqts : '0',
                    leave: row.leave,
                    month: this.paging.month,
                    // manage_shape: row.manage_shape,
                    // sundry_shape: row.sundry_shape,
                    // overtime_money: row.overtime_money,
                    full_money: row.full_money ? row.full_money : '0.00',
                    subsidy_money: row.subsidy_money ? row.subsidy_money : '0.00',
                    leave_deduction: row.leave_deduction,
                    other_deduction: row.other_deduction ? row.other_deduction : '0.00',
                    wage_salary: row.wage_salary,
                    social_deduction: row.social_deduction ? row.social_deduction : '0.00',
                    net_salary: row.net_salary,
                    remark: row.remark,
                });
                if (code) {
                    this.$message.success('保存成功!');
                }
                this.handleCurrentChange(1);
            },
            submit() {
                // 每月7号以前可以修改上月信息，7号以后将不能提交
                this.$confirm('', '是否现在提交工资报表？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    // if (parseInt(this.$moment(new Date()).format('DD')) > 7) {
                    //     return this.$message.warning('现在处于7号之后不可提交');
                    // }
                    let arr = [];
                    for (let i in this.list) {
                        if (this.list[i].submit_status == 0) {
                            arr.push(this.list[i].id);
                        }
                    }
                    let { code, data } = await this.$Http.submitSalary({ ids: arr.join(',') });
                    if (code) {
                        this.$message.success('提交成功');
                        await this.handleCurrentChange();
                    }
                });
            },
            // 导出
            async exportFn() {
                let parms = {
                    month: this.paging.month,
                };
                if (!parms.month) {
                    return this.$message.warning('请选择月份');
                }
                let url = this.utils.data.baseURL + 'store/finance/exportSalary';
                this.utils.urlToBlob(url, '工资报表', parms);
            },
            async repairGetList() {
                let obj = Object.assign({}, this.paging);
                this.loading = true;
                let { code, data } = await this.$Http.getSalary(obj);
                if (code) {
                    this.list = data;
                    this.list = data.slice(0, -1);
                    this.list.push({ staff: { position: {} }, store: { title: '团队奖' }, wage_salary: data[data.length - 1], net_salary: data[data.length - 1] });
                }
                this.loading = false;
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.handleCurrentChange(1);
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.repairGetList();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.repairGetList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .image-thumbnail {
        width: 130px;
        height: 130px;
    }

    ::v-deep {
        .el-table__body-wrapper {
            z-index: 2;
        }
    }

    .divTable {
        width: 100%;

        div {
            border-bottom: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
        }
    }

    table {
        // width: 2000px;
        border-collapse: collapse;
        border-spacing: 0;

        // table-layout: fixed;
        td {
            border: 1px solid #ebeef5;
            text-align: center;
            height: 32px;
            color: #333333;
            padding: 0 5px;
            font-size: 14px;
            word-wrap: break-word;
            word-break: break-all;
        }
    }

    .el-table__empty-block {
        min-height: 60px;
        text-align: center;
        width: 5000px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ebeef5;
        border-top: none;
    }

    .el-table__empty-text {
        line-height: 60px;
        width: 50%;
        color: #909399;
        font-size: 14px;
    }
</style>
<style>
    .el-message-box__message > p {
        color: red !important;
    }
</style>
